<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>导航条</title>

        <style type="text/css">
            .wrapper { width: 80% ; margin: auto ; border: 1px solid blue ; }

            .header {
                height: 80px ;
                background: #818181 ;
            }

            .header>div { 
                text-decoration: none ; 
                float: left ;
                height: 80px ;
                line-height: 80px ;
                user-select: none ; /*禁止用户选择*/
                padding: 0 15px ;
                color: #fff ;
            }

            .header>div:hover {
                background: #383838 ;
                cursor: pointer;
            }

            .header>div:first-child {
                background: #4CAF50 ;
            }

            .middle { height: 600px ; }
            .middle>.left  { float: left ; width: 30% ; height: 600px ;  }
            .middle>.left .list { margin: 15px ; background-color: #dedede; height: 570px ;}
            .middle>.right { float: left ; width: 70% ; height: 600px ;  }
            .middle>.right .desc { margin: 15px ; background-color: #ffff00 ; height: 570px ;}

            .footer {   background: #383838 ;  height: 100px ; }
            .footer>p{ line-height: 30px ; color: #fff ; margin: 35px 15px ; }
        </style>

    </head>
    <body>

        <div class="wrapper header">
            <div>主页</div>
            <div>新闻</div>
            <div>联系我们</div>
            <div>关于我们</div>
            <div>版权声明</div>
        </div>

        <div class="wrapper middle">
            <div class="left">
                <div class="list"></div>
            </div>
            <div class="right">
                <div class="desc"></div>
            </div>
        </div>

        <div class="wrapper footer">
            <p>底部文本</p>
        </div>
        
    </body>
</html>